<template>
	<div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
	if (!chartRef.value) return
	chartInstance = echarts.init(chartRef.value)
	const option = {
		tooltip: { trigger: 'axis' },
		xAxis: {
			type: 'category',
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		},
		yAxis: { type: 'value' },
		series: [{
			name: '销售额',
			type: 'line',
			data: [1200, 1500, 1000, 2000, 1800, 2200, 2500]
		}]
	}
	chartInstance.setOption(option)
}

onMounted(() => {
	initChart()
	window.addEventListener('resize', () => chartInstance?.resize())
})

onBeforeUnmount(() => {
	window.removeEventListener('resize', () => chartInstance?.resize())
	chartInstance?.dispose()
})
</script>
  
